<template>
	<view class="content">
		<!-- 进度条 -->
		<view class="header" v-if="list.data.length">
			<view class="text22">{{showIndex+1}}/{{list.data.length}}</view>
			<view class="headerProgress">
				<u-line-progress :percentage="percentage" height="10rpx" :showText="false"
					inactiveColor="rgba(220, 180, 144, .1)" activeColor="rgba(220, 180, 144, 1)"></u-line-progress>
			</view>
		</view>
		<view style="margin-bottom: 100rpx;overflow-y: auto;">
			<view class="title text28" v-if="list.data.length">
				<text v-if="info.quizz_type==2">单选题</text>
				<text v-if="info.quizz_type==3">判断题</text>
				<text v-if="info.quizz_type==4">多选题</text>
			</view>
			<!-- 题目 -->
			<view v-show="showFlag">
				<view class="wenziTitle text30">
					{{info.question}}
				</view>
				<view
					:class="checkList[showIndex].arr[index].isTrue==2?'xuanxiang':(checkList[showIndex].arr[index].isTrue==0?'xuanxiang activeRed':'xuanxiang activeGreen')"
					v-for="(item,index) in info.sections[0].option" @click="select(index,item)">
					<view>
						<text>{{item.order_number}}</text>
					</view>
					<view class="xuanxiangWenzi">
						{{item.answer}}
					</view>
				</view>
				<view class="answer flexbetween" v-if="showAnswer">
					<view class="answerLeft">
						<text class="text32">正确答案：</text>
						<text class="letterGreen">{{trueAnswer}}</text>
					</view>
					<view class="answerRight">
						<text class="text32">你的答案：</text>
						<text class="letterRed">{{youAnswer}}</text>
					</view>
				</view>
				<!-- 考情 -->
				<view v-if="showButton">
					<view class="margin_30 text28">
						考情：
						<text class="jiexi">{{info.schools||'暂无'}}</text>
					</view>
				</view>
				<!-- 解析 -->
				<view v-if="showButton">
					<view class="margin_30 text28">解析：</view>
					<view class="jiexi">
						{{info.jiexi||"暂无"}}
					</view>
				</view>
			</view>
		</view>
		<view class="footer flexleft" v-if="list.data.length">
			<view class="footerLeft">
				<!-- <view class="star"></view> -->
				<view>
					<view @click="collect" v-if="info.is_like==0">
						<u-icon name="star" size="20"></u-icon>
					</view>
					<view @click="cancelCollect" v-if="info.is_like==1">
						<u-icon name="star-fill" color="rgba(220, 180, 144, 1)" size="20"></u-icon>
					</view>
				</view>
				<view class="collect">{{info.is_like==0?'收藏':'已收藏'}}</view>
			</view>
			<view class="footerRight flexbetween">
				<view class="prev" @click="prev">上一题</view>
				<view class="next" @click="next" v-if="showNext">
					下一题
				</view>
				<view class="next" @click="submit" v-if="showSubmit">提交</view>
			</view>
		</view>
		<view class="zwtimg flexcenter" v-if="!list.data.length">
			<image src="https://qnwenbo.yuntaiqi.com/uploads/20230527/1d30ad56c2b2a57fdf222904874e20e4.png" mode="">
			</image>
		</view>
		<u-modal :show="show" :content='content' :showCancelButton="true" @confirm="confirm" @cancel="show = false"
			confirmColor="#080808">
			<view class="text study">该分类下的知识点已全部学习</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				page: 1,
				pagesize: 10,
				id: "", //题目id
				headline_id: "", //节id
				type: "", //题目列表类型
				info: {}, //题目详情
				list: {
					data: []
				}, //题目列表
				showIndex: 0, //当前题目的索引
				defaultPercentage: 1, //进度条每次加减的数值
				percentage: 1, //进度条
				total: 0,
				checkList: [], //选项是否选中列表
				flag: true, //让单选点击事件只触发一次
				manyFlag: true, //记录让多选点击事件
				showAnswer: false, //是否显示正确/你的答案
				showButton: false, //考情、解析是否显示
				showNext: true, //是否显示下一题
				showSubmit: false, //是否显示提交
				trueAnswer: "", //正确答案
				youAnswer: "", //你的答案
				option_id: [], //答题id
				datifile: "", //已经答过题的题目信息
				showDatifile: false, //是否显示已经答过题的题目信息
				oneClickNum: 0, //记录每章单选题答题的次数
				// manyClickNum: 0, //记录每章多选题答题的次数
				manyClickList: [], //记录多选选择选项的数组
				chapter_id: "", //章id
				// trueAnswerCount: 0, //正确答案数量
				showFlag: false,
				isClearCheckList: false, //是否清空checkList数组
			}
		},
		onLoad(options) {
			if (options.id) {
				this.headline_id = options.id
			}
			if (options.chapter_id) {
				this.chapter_id = options.chapter_id
			}
			if (options.name) {
				uni.setNavigationBarTitle({
					title: options.name
				})
			}
			this.type = options.type
			this.init()
		},
		methods: {
			init() { //题目列表
				let _this = this;
				httpRequest.request('/api/quizz/lists', 'POST', {
					// page: 1,
					// pagesize: this.pagesize,
					headline_id: this.headline_id, //节id
					chapter_id: this.chapter_id, //章id
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						_this.list.data = res.data
						// if (_this.list.data.length == 0) {
						// 	httpRequest.toast("该章节下还没有题目呦！");
						// 	setTimeout(() => {
						// 		uni.navigateBack(1)
						// 	}, 1000)
						// 	return false;
						// }
						_this.list.data.forEach(item => {
							let obj = {
								id: item,
								arr: []
							}
							this.checkList.push(obj)
						})
						_this.total = _this.list.data.length
						_this.percentage = 1 / _this.total * 100
						_this.defaultPercentage = 1 / _this.total * 100
						if (this.list.data.length) {
							_this.getInfo()
						}
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			getInfo() { //题目详情
				let _this = this;
				httpRequest.request('/api/quizz/detail', 'POST', {
					id: this.list.data[this.showIndex]
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						console.log(this.showIndex, "当前题目索引");
						console.log(this.checkList[this.showIndex].arr, "选中的选项状态")
						if (this.info.quizz_type == 4) {
							this.showNext = false
							this.showSubmit = true
						}
						if (this.checkList[this.showIndex].arr.length) {
							this.showNext = true
							this.showSubmit = false
						}
						if (!this.checkList[this.showIndex].arr.length) {
							this.isClearCheckList = false
							this.showDatifile = false
						} else {
							this.showDatifile = true
						}
						this.showFlag = true
						if (!this.showDatifile) {
							this.info.sections[0].option.forEach(item => {
								let obj = {
									sectionsId: item.id,
									isTrue: 2, //0错误,1正确,2未选择
								}
								// if (item.state == 1) {
								// 	this.trueAnswerCount++
								// }
								this.checkList.forEach(ite => {
									if (ite.id == this.list.data[this.showIndex]) {
										if (ite.arr.length != this.info.sections[0].length) {
											ite.arr.push(obj)
										}
									}
								})
							})
						}
						// this.showDatifile || (this.oneClickNum > 1 && this.oneClickNum != this.showIndex)
						if (this.showDatifile) {
							console.log("走这里了！")
							console.log(this.showDatifile, "showDatifile");
							console.log(this.oneClickNum, "oneClickNum");
							console.log(this.showIndex, "showIndex");
							this.showNext = true
							this.showSubmit = false
							this.datifile = this.info.datifile
							if (this.datifile.length) {
								this.showButton = true
								this.showAnswer = true
								this.trueAnswer = this.datifile[0].true_order_number.replace(/,/g, '')
								if (!this.trueAnswer) {
									this.trueAnswer = "暂无"
								}
								let arr = []
								thia.datifile.forEach(item => {
									arr.push(order_number)
								})
								this.youAnswer = arr.replace(/,/g, '')
								if (this.datifile.options_id == this.datifile.true_id) {
									this.checkList[this.showIndex].arr.forEach(item => {
										if (item.sectionsId == this.datifile.options_id) {
											item.isTrue = 1
										}
									})
								} else {
									this.checkList[this.showIndex].arr.forEach(item => {
										if (item.sectionsId == this.datifile.options_id) {
											item.isTrue = 0
										} else if (item.sectionsId == this.datifile.true_id) {
											item.isTrue = 1
										} else {
											item.isTrue = 2
										}
									})
								}
							}
						}
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			select(index, item) { //选择
				if (this.info.quizz_type == 2 || this.info.quizz_type == 3) { //单选、判断
					if (this.flag) {
						this.oneClickNum++
						if (item.state == 0) {
							this.checkList[this.showIndex].arr[index].isTrue = 0
							this.info.sections[0].option.forEach((item, i) => {
								if (item.state == 1) {
									this.checkList[this.showIndex].arr[i].isTrue = 1
								}
							})
						} else {
							this.checkList[this.showIndex].arr[index].isTrue = 1
						}
						this.option_id.push(item.id)
						this.submit()
					}
				} else if (this.info.quizz_type == 4) { //多选
					if (this.manyFlag) {
						let isAdd = true
						if (this.manyClickList.length) {
							this.manyClickList.forEach((value, i) => {
								if (item.id == value.id) {
									this.manyClickList.splice(i, 1)
									this.option_id.splice(this.option_id.indexOf(item.id), 1)
									this.oneClickNum--
									this.checkList[this.showIndex].arr[i].isTrue = 2
									isAdd = false
								}
							})
						}
						if (isAdd) {
							this.manyClickList.push({
								id: item.id,
								index: index,
								state: item.state
							})
							this.option_id.push(item.id)
							this.checkList[this.showIndex].arr[index].isTrue = 1
							this.oneClickNum++
						}
						console.log(this.manyClickList, "选中的选项数组")
						console.log(this.option_id, "选中的选项id数组")
					}
				}
			},
			submit() {
				if (this.info.quizz_type == 4) {
					if (!this.option_id.length) {
						httpRequest.toast("请先选择答案哦！")
						return
					}
				}
				let _this = this;
				httpRequest.request('/api/quizz/add', 'POST', {
					quizz_id: _this.info.id, //题目id
					option_id: _this.option_id.join(','), //答题id
				}).then(res => {
					if (res.code == 1) {
						if (_this.info.quizz_type == 4) {
							_this.manyClickList.forEach(item => {
								if (item.state == 0) {
									_this.checkList[_this.showIndex].arr[item.index].isTrue = 0
								} else {
									_this.checkList[_this.showIndex].arr[item.index].isTrue = 1
								}
							})
							_this.info.sections[0].option.forEach((item, index) => {
								if (_this.manyClickList.indexOf(item.id) == -1) {
									if (item.state == 1) {
										_this.checkList[_this.showIndex].arr[index].isTrue = 1
									}
								}
							})
						}
						_this.showNext = true
						this.showSubmit = false
						_this.trueAnswer = res.data[0].true_order_number.replace(/,/g, '')
						if (!_this.trueAnswer) {
							_this.trueAnswer = "暂无"
						}
						if (res.data.length == 1) {
							_this.youAnswer = res.data[0].order_number
						} else {
							let arr = []
							res.data.forEach(item => {
								arr.push(item.order_number)
							})
							_this.youAnswer = arr.join('')
						}
						_this.showButton = true
						_this.showAnswer = true
						_this.flag = false
						_this.manyFlag = false
						_this.isClearCheckList = true
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			prev() {
				if (this.showIndex == 0) {
					httpRequest.toast('没有上一题喽！')
					return false
				}
				if (!this.isClearCheckList) {
					this.checkList[this.showIndex].arr = []
				}
				this.showIndex--
				this.percentage = this.percentage - this.defaultPercentage
				this.showButton = true
				this.showAnswer = true
				this.showDatifile = true
				this.getInfo()
			},
			next() {
				if (!this.showButton) {
					httpRequest.toast("请先答题哦！")
					return
				}
				if (this.showIndex == this.list.data.length - 1) {
					this.show = true
					return false
				}
				if (!this.isClearCheckList) {
					this.showDatifile = false
				}
				this.showButton = false
				this.showAnswer = false
				// this.trueAnswerCount = 0
				this.flag = true
				this.manyFlag = true
				this.option_id = []
				this.manyClickList = []
				this.showIndex++
				this.percentage = this.percentage + this.defaultPercentage
				this.showFlag = false
				this.getInfo()
			},
			collect() { //收藏
				let _this = this;
				httpRequest.request('/api/quizz/shoucang', 'POST', {
					quizz_id: this.list.data[this.showIndex]
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						this.getInfo()
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			cancelCollect() { //取消收藏
				let _this = this;
				httpRequest.request('/api/quizz/qxshoucang', 'POST', {
					quizz_id: this.list.data[this.showIndex]
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						this.getInfo()
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			confirm() {
				this.show = false
				uni.navigateBack(1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.study {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding: 70rpx 0rpx;
	}

	.content {
		padding: 30rpx;
	}

	.header {
		display: flex;
		align-items: center;

		.headerProgress {
			width: 588rpx;
			margin-left: 30rpx;
		}
	}

	.text22 {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.text28 {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(220, 180, 144, 1);
	}

	.title {
		width: 142rpx;
		height: 57rpx;
		line-height: 57rpx;
		text-align: center;
		background-color: rgba(220, 180, 144, .1);
		border-radius: 67rpx 67rpx 67rpx 67rpx;
		margin: 30rpx 0;
	}

	.text30 {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.wenziTitle {
		margin-bottom: 40rpx;
	}

	.xuanxiang {
		display: flex;
		align-items: center;
		padding: 26rpx 117rpx 26rpx 36rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #ECECEC;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;

		.xuanxiangWenzi {
			margin-left: 38rpx;

		}
	}

	// 正确
	.activeGreen {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #22A75C;
		background: #EAF7EE;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		border: 2rpx solid #22A75C;
		position: relative;
	}

	.activeGreen::after {
		content: '';
		width: 59rpx;
		height: 36rpx;
		position: absolute;
		top: -2rpx;
		right: -2rpx;
		background-image: url('../../static/image/system/trueGreen.png');
		background-size: 100%;
	}

	// 错误
	.activeRed {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F43D38;
		background: #FFEBEB;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #F43D38;
		position: relative;
	}

	.activeRed::after {
		content: '';
		width: 59rpx;
		height: 36rpx;
		position: absolute;
		top: -2rpx;
		right: -2rpx;
		background-image: url('../../static/image/system/falseRed.png');
		background-size: 100%;
	}

	.answer {
		.text32 {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.letterGreen {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #22A75C;
		}

		.letterRed {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #F43D38;
		}
	}

	.jiexi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 40rpx;
	}

	.footer {
		padding: 20rpx 50rpx 35rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
	}

	.footerLeft {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.star {
			width: 38rpx;
			height: 35rpx;
			background-image: url('../../static/image/system/star.png');
			background-size: 100%;
		}

		.collect {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			text-align: center;
		}
	}

	.footerRight {
		margin-left: 100rpx;
	}

	.next {
		background: #DCB490;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		border: 2rpx solid #DCB490;
		padding: 21rpx 67rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		margin-left: 30rpx;
	}

	.prev {
		background: rgba(220, 180, 144, 0.1);
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		border: 2rpx solid #DCB490;
		padding: 21rpx 67rpx;
		color: #DCB490;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
	}
</style>